<template>
    <div class="active">
       <h3>新手活动1070号</h3>
       <p>体验聚爱财T+0极速回款银行卡</p>
       <div class="pro">
           <div class="pro_left">
               <dl>
                   <dt>10.0<i>%</i></dt>
                   <dd>年化收益</dd>
               </dl>
           </div>
           <div class="pro_right">
               <dl>
                   <dt>2<i>天</i></dt>
                   <dd>期限</dd>
               </dl>
           </div>
       </div>
       <button>立即购买</button>
    </div>
</template>

<script>
export default {
  name: 'NoviceActivity'
}
</script>

<style lang = 'stylus' scoped>
.active
  background #CDA76E
  width 7.3rem
  margin 0 auto
  margin-top .2rem
  padding-bottom .01rem
  border-radius .1rem
  h3
    font-size .4rem
    color #ffffff
    text-align center
    padding-top .3rem
  p
    font-size .26rem
    color #99620E
    text-align center
    margin-top .1rem
    margin-bottom .2rem
  .pro
    overflow hidden
    div
      float left
      width 49.5%
      i
        font-style normal
        font-size .48rem
    .pro_left
      border-right 1px solid #99620E
      dl
        text-indent .7rem
        color #ffffff
        text-align left
        dt
          font-size .72rem
        dd
          font-size .3rem
    .pro_right
      dl
        text-indent 1.4rem
        color #ffffff
        text-align left
        dt
          font-size .72rem
        dd
          font-size .3rem
  button
    width 5.21rem
    height .92rem
    background-image linear-gradient(-227deg,#ECCC8F 0,#D5AC68 100%)
    box-shadow linear-gradient(-227deg,#ECCC8F 0,#D5AC68 100%);
    color #ffffff
    font-size .36rem
    border none
    margin 0 auto
    border-radius .1rem
    display block
    margin .38rem auto
    outline none
</style>
